<template>
  <div class="overflow-y-scroll h-[700px]">
    <div class="w-5/6 m-auto">
      <div class="w-full flex">
        <div class="mt-[80px] w-full">
          <div
            v-for="(item, index) in userId   "
            :key="index"
            class="border-2 border-[#fdc14b] mb-[38px] 2xl:text-[30px] cursor-pointer"
          >
            <p class="m-1 ml-3 2xl:ml-[40px] 2xl:mt-[20px] 2xl:mb-[16px]">
              商品名称：{{ item.productName }}
            </p>
            <div class="flex m-1">
              <img
                :src="item.img.split(',')[1]"
                alt=""
                class="w-1/5 m-1 2xl:ml-[40px]"
              />
              <div class="">
                <div class="flex">
                  <p class="">商家名称：{{ item.name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import { reactive,ref } from "vue";
let head1 = reactive([
  { title: "首页" },
  { title: "分类" },
  { title: "收藏" },
  { title: "订单" },
]);
let storeupData = reactive([
  {
    title: "鱼子酱寿司",
    img: "https://i.postimg.cc/zBFZ4d5S/12-2x.png",
    shopname: "洋子寿司店",
    introduce: "来自北海道的鱼子酱包裹糯米。",
    price: 130,
  },
  {
    title: "韩式炸鸡",
    img: "https://i.postimg.cc/RFyssKJQ/13-2x.png",
    shopname: "韩式炸鸡",
    introduce: "新鲜小鸡油炸之后涂满甜辣酱。",
    price: 130,
  },
]);
//1.用户的收藏取消delete请求接口
let id = ref(0);
const deleteItem = (item) => {
  axios
    .delete(`http://1.14.126.98:8081/star/del?id=${id.value}`)
    .then((res) => {
      id.value = item.id;
      alert(res.data.msg);
      axios.get(`http://1.14.126.98:8081/star/all?userId=23`).then((res) => {
        userId.value = res.data;
      });
    });
};
//2.用户查看收藏get请求接口
let userId = ref([]);
let img = ref([]);
axios.get(`http://1.14.126.98:8081/star/all?userId=23`).then((res) => {
  userId.value = res.data;
  console.log(userId.value);
});
</script>
